<template>
  <div 
    v-if="show" 
    class="modal" 
    @click="handleModalClick"
  >
    <div class="modal-content" :style="modalContentStyle">
      <div class="modal-header">
        <h3 class="modal-title">规则匹配</h3>
        <button class="close-modal" @click="closeModal">&times;</button>
      </div>
      
      <div class="modal-body">
        <div class="form-section">
          <h3 class="section-title-small">
            <i class="fas fa-file-word"></i>上传Word文档
          </h3>
          
          <div class="rule-upload-container">
            <FileUpload
              v-model="ruleFile"
              accept=".docx"
              :max-size="50"
              description="支持docx格式，单个文件不超过50M"
              class="rule-upload-area"
            />
          </div>
        </div>
        
        <div class="template-preview" v-if="showTemplatePreview">
          <div class="download-section">
            <i class="fas fa-file-excel download-icon"></i>
            <div class="download-text">
              <div class="download-title">规则模板已生成</div>
              <div class="download-hint">基于您上传的文档，我们已生成规则模板Excel文件</div>
            </div>
            
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button class="btn-primary" @click="downloadTemplate">填写模板</button>
        <button class="btn-secondary" @click="closeModal">取消</button>
        <button class="btn-primary" @click="generateTemplate">生成模板</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FileUpload from './FileUpload.vue'
import { useCustomRuleModal } from '../scripts/customRuleModal'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
  'showExcel': []
}>()

const {
  modalContentStyle,
  ruleFile,
  showTemplatePreview,
  closeModal,
  handleModalClick,
  generateTemplate,
  downloadTemplate
} = useCustomRuleModal(props, emit)
</script>